<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理</title>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
    <!--    <link rel="stylesheet" href="../../styles/common.css" />-->
    <!--    <link rel="stylesheet" href="../../styles/page.css" />-->
    <style>
        .el-input__inner {
            width: 100px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-tabs type="border-card">

        <el-tab-pane>
            <span slot="label" @click="studentManage()">学生管理</span>
            <div>
                <span style="font-size: 13px"> 认证年份:</span>
                <template>
                    <el-select v-model="search.stateTime" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in goStateTimes" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <span style="font-size: 13px"> 院系名称:</span>
                <template>
                    <el-select v-model="search.deptId" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in depts" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <span style="font-size: 13px"> 入学年份:</span>
                <template>
                    <el-select v-model="search.goschoolYear" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in goSchoolYears" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <span style="font-size: 13px"> 性别:</span>
                <template>
                    <el-select v-model="search.sex" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in sexs" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <span style="font-size: 13px"> 姓名:</span>
                <input type="text" name="name" v-model="search.sname"
                       style="-webkit-appearance: none;background: #FFF;border-radius: 4px;border: 1px solid #DCDFE6;
                    box-sizing: border-box;color: #606266;display: inline-block;font-size: inherit;height: 28px;line-height: 35px;
                    outline: 0;padding: 0 15px;width: 150px"
                >
                <el-button type="primary" size="mini" @click="getStudentList()">查询</el-button>
                <el-button size="mini" @click="studentReset(search)">重置</el-button>


                <span style="margin-left: 10%">
                <el-button
                        type="danger"
                        @click="deleteHandleMessage()"
                        :disabled="dataListSelectionsMessage.length <= 0"
                        size="mini">批量删除</el-button>
                <el-button type="primary" size="mini">导出</el-button>
            </span>
            </div>
            <el-table
                    :data="data.list"
                    v-loading="dataListLoadingMessage"
                    @selection-change="selectionChangeHandleMessage"
                    style="width: 100%">
                <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                <el-table-column
                        label="学校名称"
                        prop="schoolName">
                </el-table-column>
                <el-table-column
                        label="院系机构"
                        prop="deptName">
                </el-table-column>
                <el-table-column
                        label="入学年份"
                        prop="goschoolYear">
                </el-table-column>
                <el-table-column
                        label="班级"
                        prop="className">
                </el-table-column>
                <el-table-column
                        label="姓名"
                        prop="sname">
                </el-table-column>
                <el-table-column
                        label="性别"
                >
                    <template slot-scope="scope">
                        <div slot="reference" class="name-wrapper" v-if="scope.row.sex == 1">
                            <el-tag size="medium">男</el-tag>
                        </div>
                        <div slot="reference" class="name-wrapper" v-if="scope.row.sex == 0">
                            <el-tag size="medium">女</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="手机号码"
                        prop="phone">
                </el-table-column>
                <el-table-column
                        label="认证状态"
                >
                    <template slot-scope="scope">
                        <div slot="reference" class="name-wrapper" v-if="scope.row.state == 1">
                            <el-tag size="medium">认证</el-tag>
                        </div>
                        <div slot="reference" class="name-wrapper" v-if="scope.row.state == 0">
                            <el-tag size="medium">未认证</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="认证时间"
                        prop="stateTime">
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="deleteHandleMessage(scope.row.branId)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="data.currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="data.pageCount"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="data.totalCount">
                </el-pagination>
            </div>
        </el-tab-pane>

        <!--学生认证-->
        <el-tab-pane>
            <span slot="label" @click="studentState()">学生认证</span>
            <div>
                <span style="font-size: 13px"> 认证年份:</span>
                <template>
                    <el-select v-model="search.stateTime" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in goStateTimes" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <span style="font-size: 13px"> 院系名称:</span>
                <template>
                    <el-select v-model="search.deptId" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in depts" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <span style="font-size: 13px"> 入学年份:</span>
                <template>
                    <el-select v-model="search.goschoolYear" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in goSchoolYears" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <span style="font-size: 13px"> 性别:</span>
                <template>
                    <el-select v-model="search.sex" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in sexs" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <span style="font-size: 13px"> 姓名:</span>
                <input type="text" name="name" v-model="search.sname"
                       style="-webkit-appearance: none;background: #FFF;border-radius: 4px;border: 1px solid #DCDFE6;
                    box-sizing: border-box;color: #606266;display: inline-block;font-size: inherit;height: 28px;line-height: 35px;
                    outline: 0;padding: 0 15px;width: 150px"
                >
                <el-button type="primary" size="mini" @click="getStudentList()">查询</el-button>
                <el-button size="mini" @click="studentReset(search)">重置</el-button>


                <span style="margin-left: 10%">
                <el-button
                        type="danger"
                        @click="deleteHandleMessage()"
                        :disabled="dataListSelectionsMessage.length <= 0"
                        size="mini">批量删除</el-button>
                <el-button type="primary" size="mini">导出</el-button>
            </span>
            </div>
            <el-table
                    :data="data.list"
                    v-loading="dataListLoadingMessage"
                    @selection-change="selectionChangeHandleMessage"
                    style="width: 100%">
                <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                <el-table-column
                        label="学校名称"
                        prop="schoolName">
                </el-table-column>
                <el-table-column
                        label="院系机构"
                        prop="deptName">
                </el-table-column>
                <el-table-column
                        label="入学年份"
                        prop="goschoolYear">
                </el-table-column>
                <el-table-column
                        label="班级"
                        prop="className">
                </el-table-column>
                <el-table-column
                        label="姓名"
                        prop="sname">
                </el-table-column>
                <el-table-column
                        label="性别"
                >
                    <template slot-scope="scope">
                        <div slot="reference" class="name-wrapper" v-if="scope.row.sex == 1">
                            <el-tag size="medium">男</el-tag>
                        </div>
                        <div slot="reference" class="name-wrapper" v-if="scope.row.sex == 0">
                            <el-tag size="medium">女</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="手机号码"
                        prop="phone">
                </el-table-column>
                <el-table-column
                        label="认证状态"
                >
                    <template slot-scope="scope">
                        <div slot="reference" class="name-wrapper" v-if="scope.row.state == 1">
                            <el-tag size="medium">认证</el-tag>
                        </div>
                        <div slot="reference" class="name-wrapper" v-if="scope.row.state == 0">
                            <el-tag size="medium">未认证</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="认证时间"
                        prop="stateTime">
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="deleteHandleMessage(scope.row.branId)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="data.currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="data.pageCount"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="data.totalCount">
                </el-pagination>
            </div>
        </el-tab-pane>

    </el-tabs>
</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<!-- 引入 request -->
<script src="../../js/request.js"></script>
<!-- 引入 student 请求 -->
<script src="../../api/student.js"></script>

</body>
</html>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                // 性别,下拉框选项
                sexs: [
                    {value: '1', label: '男'},
                    {value: '0', label: '女'}
                ],
                // 院系名称,下拉框选项
                depts:[
                    {value: '3001', label: '工程学院'}
                ],
                goSchoolYears:[

                ],
                goStateTimes:[

                ],
                // 查询条件
                search: {
                    sex: '',
                    sname: '',
                    deptId: '', // 院系名称对应 id
                    goschoolYear: '', //入学年份
                    stateTime: '', // 认证年份
                    state: 1
                },
                // 返回数据
                data: {
                    // table 数据
                    list: [
                        {
                            stid: 1, // 学生id
                            schoolName: '', // 学生姓名
                            deptName: '', // 院系名称
                            goschoolYear: '', // 入学年份
                            className: '', // 班级名称
                            sname: '', // 学生姓名
                            sex: 1, // 性别
                            phone: '', // 电话
                            state: 1, // 认证状态
                            stateTime: '' //认证时间
                        }
                    ],
                    // 分页数据
                    currentPage: 1,
                    pageCount: 10,
                    totalCount: 0
                },
                dataListLoadingMessage: false,
                dataListSelectionsMessage: [],
                dataListLoadingCertification: false,
                dataListSelectionsCertification: []
            }
        },
        mounted(){
            this.getSearchStudentInfo();
        },
        created() {
            this.getStudentList();
        },
        methods: {
            //获取院系信息
            getSearchStudentInfo(){
                getSearchInfo().then((response)=>{
                    console.log(response)
                    this.depts = response.data.data.depts;
                    this.goSchoolYears = response.data.data.goSchoolYears;
                    this.goStateTimes = response.data.data.goStateTimes;
                })
            },
            //学生管理重置
            studentReset(search) {
                search.sex = '',
                search.name = '',
                search.goschoolYear = '',
                search.stateTime = '',
                search.deptId = ''
                this.getStudentList();
            },
            // 改变为学生管理
            studentManage() {
                // this.studentReset();
                this.search.state = 1;
                this.data.currentPage = 1;
                this.getStudentList();
            },
            // 改变为学生认证
            studentState() {
                // this.studentReset();
                this.search.state = 0;
                this.data.currentPage = 1;
                this.getStudentList();
            },
            // 更换每页查询数
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.data.pageCount = val;
            },
            // 更换页数
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.data.currentPage = val;
                this.getStudentList();
            },
            // 获取学生信息
            getStudentList() {
                let page = {
                    "currentPage" : this.data.currentPage,
                    "pageCount" : this.data.pageCount
                };
                getMessagePage(page,this.search).then((response)=>{
                    this.data = response.data.data.page;
                })
            },
            // 多选
            selectionChangeHandleMessage(val) {
                this.dataListSelectionsMessage = val;
            },
            // 删除
            deleteHandleMessage(id) {
                console.log(id)
                var ids = id
                    ? [id]
                    : this.dataListSelectionsMessage.map(item => {
                        return item.brandId;
                    });
                this.$confirm(
                    `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }
                ).then(() => {
                    console.log(ids)
                    //发送请求
                });
            },
            // 多选
            selectionChangeHandleCertification(val) {
                this.dataListSelectionsCertification = val;
            },
            // 删除
            deleteHandleCertification(id) {
                console.log(id)
                var ids = id
                    ? [id]
                    : this.dataListSelectionsCertification.map(item => {
                        return item.brandId;
                    });
                this.$confirm(
                    `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }
                ).then(() => {
                    console.log(ids)
                    //发送请求
                });
            },
        }
    })
</script>
